<template>
	<view class="content">
		
		<div class="part top-part">
			<div class="poker poker-absolute" v-for="(item, index) in pokerList" :key="index" :animation="item.animationData"
				:style="{
					'left': item.left, 
					'top': item.top, 
					'transform': `rotate(${item.rotate}deg) rotateY(${item.rotateY || 0}deg)`, 
					'z-index': item.zIndex || 2024, 
					'opacity': item.opacity || 1,
					'background-image': state === 10 && item.trueData ? `url(${getPokerImage(item.trueData)})` : ''
				}"
				@click="pokerClickAction(index, item)"
			></div>
			<div class="poker-info" v-if="state === 10" 
				v-for="(item, index) in resultList" :key="index"
				:style="{
					'top': endInfoFrameData[getInfoFrameKey()][index].top,
					'left': endInfoFrameData[getInfoFrameKey()][index].left,
					'width': getInfoFrameKey() === 5 ? '30vw' : '25vw'
				}"
			>
				<div v-if="getInfoFrameKey() !== 5">第{{index + 1}}张牌</div>
				<div v-if="getInfoFrameKey() !== 5">{{ item.isReverse ? "逆位" : "正位" }}</div>
				<div v-if="getInfoFrameKey() !== 5">{{ item.title }}</div>
				<!-- 5张牌阵型特殊处理 -->
				<div v-if="getInfoFrameKey() === 5">{{ `${index + 1}/${item.isReverse ? "逆位" : "正位"}/${item.title}` }}</div>
			</div>
		</div>
		
		<div class="part bottom-part" v-if="state !== 10">
			<!-- 描述 -->
			<div class="desc-list">
				<div class="desc-side">«»</div>
				<div class="desc-center">{{ [6, 7, 8, 9, 901].includes(state) ? refreshed : refreshing }}</div>
				<div class="desc-side">«»</div>
			</div>
		</div>
		
		<div class="part bottom-part" v-else>
			<!-- 占卜 -->
			<image class="start-btn-bg btn-bg-animation" src="@/static/images/icon-bg.png"></image>
			<div class="start-btn" @click="clickAction">占卜</div>
		</div>
		
		<div class="cover-view" v-if="showIdx >= 0" @click="showIdx = -1">
			<div class="poker poker-all-screen"
				:style="{
					'background-image': `url(${getPokerImage(resultList[showIdx])})`, 
					'transform': `rotate(${resultList[showIdx].isReverse ? 180 : 0}deg)`, 
				}"
			></div>
			<div style="margin: 10rpx; font-weight: bolder;">{{ `第${showIdx + 1}张牌`}}</div>
			<div style="margin: 10rpx; font-weight: bolder;">{{ resultList[showIdx].isReverse ? "逆位" : "正位" }}</div>
			<div style="margin: 10rpx; font-weight: bolder;">{{ resultList[showIdx].title || '' }}</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testImg: require('@/static/images/poker-back.jpeg'),
				// 卡片的数据源
				pokerList: [],
				// 卡片总数
				count: 78,
				// 当前状态
				// 0 牌乱序待洗牌，1 洗牌中，2 洗牌完成，3 切牌中，4 切牌完成，5 摆牌中，6 摆牌完成，7 选牌中，8 选牌完成，9 看牌中，10 看牌完成
				// 301，302，901补充情况
				state: 0,
				// 显示文字
				refreshing: "正在洗牌...",
				refreshed: `此刻，\n请深吸一口气，\n凭直觉选取神秘塔罗牌`,
				// 动画时间
				duration: 500,
				// 上页传入排阵
				formItem: null,
				// 当前选择牌的下标
				selectedIndex: -1,
				// 选择牌的下标列表
				selectedList: [],
				// 不同排阵对应的选牌位置1：同一行显示下方
				fixedFrameData: {
					1: [{ top: "65%", left: "calc(50% - 12.5vw)" }],
					301: [{ top: "65%", left: "calc(50% - 42.5vw)" }, { top: "65%", left: "calc(50% - 12.5vw)" }, { top: "65%", left: "calc(50% + 18.5vw)" }],
					3: [{ top: "65%", left: "calc(50% - 42.5vw)" }, { top: "65%", left: "calc(50% - 12.5vw)" }, { top: "65%", left: "calc(50% + 18.5vw)" }],
					4: [{ top: "65%", left: "calc(50% - 42.5vw)" }, { top: "65%", left: "calc(50% - 22.5vw)" }, { top: "65%", left: "calc(50% - 1.5vw)" }, { top: "65%", left: "calc(50% + 18.5vw)" }],
					5: [{ top: "65%", left: "calc(50% - 42.5vw)" }, { top: "65%", left: "calc(50% - 27.5vw)" }, { top: "65%", left: "calc(50% - 12.5vw)" }, { top: "65%", left: "calc(50% + 3.5vw)" }, { top: "65%", left: "calc(50% + 18.5vw)" }],
					6: [{ top: "65%", left: "calc(50% - 42.5vw)" }, { top: "65%", left: "calc(50% - 30.5vw)" }, { top: "65%", left: "calc(50% - 18.5vw)" }, { top: "65%", left: "calc(50% - 6.5vw)" }, { top: "65%", left: "calc(50% + 6.5vw)" }, { top: "65%", left: "calc(50% + 18.5vw)" }],
				},
				// 不同排阵对应的选牌位置2：按牌阵显示在上方
				endFrameData: {
					1: [{ top: "calc(30% - 21.25vw)", left: "calc(50% - 12.5vw)" }],
					301: [{ top: "50%", left: "calc(50% - 12.5vw)" }, { top: "calc(30% - 21.25vw)", left: "calc(50% - 42.5vw)" }, { top: "calc(30% - 21.25vw)", left: "calc(50% + 18.5vw)" }],
					3: [{ top: "calc(30% - 21.25vw)", left: "calc(50% - 42.5vw)" }, { top: "calc(30% - 21.25vw)", left: "calc(50% - 12.5vw)" }, { top: "calc(30% - 21.25vw)", left: "calc(50% + 18.5vw)" }],
					4: [{ top: "50%", left: "calc(50% - 12.5vw)" }, { top: "50%", left: "calc(50% - 42.5vw)" }, { top: "50%", left: "calc(50% + 18.5vw)" }, { top: "calc(25% - 21.25vw)", left: "calc(50% - 12.5vw)"}],
					5: [{ top: "68%", left: "calc(50% - 12.5vw)" }, { top: "35%", left: "calc(50% - 32.5vw)" }, { top: "35%", left: "calc(50% + 8.5vw)" }, { top: "2%", left: "calc(50% - 44.5vw)" }, { top: "2%", left: "calc(50% + 20.5vw)" }],
					6: [{ top: "calc(25% - 21.25vw)", left: "calc(50% - 42.5vw)" }, { top: "50%", left: "calc(50% - 42.5vw)" }, { top: "calc(25% - 21.25vw)", left: "calc(50% - 12.5vw)" }, { top: "50%", left: "calc(50% - 12.5vw)" }, { top: "calc(25% - 21.25vw)", left: "calc(50% + 18.5vw)" }, { top: "50%", left: "calc(50% + 18.5vw)" }],
				},
				// 在endFrameData的top基础上加上poker的高度42.5vw
				endInfoFrameData: {
					1: [{ top: "calc(30% + 21.25vw)", left: "calc(50% - 12.5vw)" }],
					301: [{ top: "calc(50% + 42.5vw)", left: "calc(50% - 12.5vw)" }, { top: "calc(30% + 21.25vw)", left: "calc(50% - 42.5vw)" }, { top: "calc(30% + 21.25vw)", left: "calc(50% + 18.5vw)" }],
					3: [{ top: "calc(30% + 21.25vw)", left: "calc(50% - 42.5vw)" }, { top: "calc(30% + 21.25vw)", left: "calc(50% - 12.5vw)" }, { top: "calc(30% + 21.25vw)", left: "calc(50% + 18.5vw)" }],
					4: [{ top: "calc(50% + 42.5vw)", left: "calc(50% - 12.5vw)" }, { top: "calc(50% + 42.5vw)", left: "calc(50% - 42.5vw)" }, { top: "calc(50% + 42.5vw)", left: "calc(50% + 18.5vw)" }, { top: "calc(25% + 21.25vw)", left: "calc(50% - 12.5vw)"}],
					5: [{ top: "calc(68% + 42.5vw)", left: "calc(50% - 14.5vw)" }, { top: "calc(35% + 42.5vw)", left: "calc(50% - 34.5vw)" }, { top: "calc(35% + 42.5vw)", left: "calc(50% + 6.5vw)" }, { top: "calc(2% + 42.5vw)", left: "calc(50% - 46.5vw)" }, { top: "calc(2% + 42.5vw)", left: "calc(50% + 18.5vw)" }],
					6: [{ top: "calc(25% + 21.25vw)", left: "calc(50% - 42.5vw)" }, { top: "calc(50% + 42.5vw)", left: "calc(50% - 42.5vw)" }, { top: "calc(25% + 21.25vw)", left: "calc(50% - 12.5vw)" }, { top: "calc(50% + 42.5vw)", left: "calc(50% - 12.5vw)" }, { top: "calc(25% + 21.25vw)", left: "calc(50% + 18.5vw)" }, { top: "calc(50% + 42.5vw)", left: "calc(50% + 18.5vw)" }],
				},
				resultList: [],
				resultData: {},
				// 开发模式，特殊逻辑便于调试，设为true后洗牌中不要乱点，没处理这种情况会报错
				isDev: false,
				// 全屏显示
				showIdx: -1,
			}
		},
		onLoad: function(option) {
			const params = JSON.parse(decodeURIComponent(option.params));
			// console.log("params: ", params);
			this.formItem = params;
		},
		created() {
			this.pokerList = this.getFrameList();
		},
		mounted() {
			// 设置状态为洗牌中
			this.state = 1;
			// 设置数据源，加载数据源中的导出动画
			if (!this.isDev) {
				this.loadAnimation();
			}
			// 生成结果数据
			this.initRandomResultList();
		},
		methods: {
			getInfoFrameKey() {
				if (this.formItem.title.includes("圣三角")) {
					return 301;
				}
				return this.formItem.count;
			},
			getPokerImage(data) {
				if (data.img) {
					if (data.picIdx < this.tarotPics.mainPageImgNum) {
						return require(`@/static/images/tarotImage/${data.img}.jpeg`);
					} else {
						return require(`@/pageDetail/static/tarotImage/${data.img}.jpeg`);
					}
				}
				return this.testImg;
			},
			initRandomResultList() {
				// console.log(this.tarotPics.tarotData);
				var total = this.tarotPics.tarotData.length;
				if (total !== this.count) {
					console.log("数据源数量不同，需调整布局逻辑");
					return;
				}
				
				// var tmp = new Set();
				// var needCount = this.formItem.count;
				// while (tmp.size < needCount) {
				// 	var randomIdx =  Math.floor(this.getRandomValue(total - 1,0));
				// 	tmp.add(randomIdx);
				// }
				// console.log(tmp);
				
				var res = [];
				// var res = {};
				var tmp = [];
				var needCount = this.formItem.count;
				for (var i = 0; i < needCount; i++) {
				    var randomIdx = Math.floor(this.getRandomValue(total - 1,0));
				    if (tmp.includes(randomIdx)) {
				        console.log('重复值：', randomIdx); // 输出重复值
				        while (tmp.includes(randomIdx)) {
				            randomIdx = Math.floor(this.getRandomValue(total - 1,0));
				        }
				    }
				    tmp.push(randomIdx);
					var trueData = this.tarotPics.tarotData[randomIdx];
					// 处理微信小程序不能超过2MB的问题，标记数据源下标，前50个图在主包，其他在分包
					trueData.picIdx = randomIdx;
					trueData.isReverse = Math.random() < 0.5;
					res.push(this.tarotPics.tarotData[randomIdx]);
					// res[randomIdx] = this.tarotPics.tarotData[randomIdx];
				}
				console.log(res);
				this.resultList = res;
				// this.resultData = res;
			},
			getRandomValue(max, min) {
				return Math.random() * (max - min + 1) + min;
			},
			getFrameList() {
				var list = [];
				for (var i = 0; i < this.count; i++) {
					let item = this.initFrameItem(i);
					list.push(item);
				}
				return list;
			},
			initAnimation(index, top, left, rotate, opacity=1, rotateY=0) {
				var animation = null;
				// 如有前次的数据，则本次创建动画
				if (this.pokerList.length && this.pokerList.length === this.count) {
					var lastItem = this.pokerList[index];
					animation = uni.createAnimation({
						duration: this.duration,
						timingFunction: 'ease',
					});
					animation.top(top).left(left).rotate(rotate).opacity(opacity).rotateY(rotateY).step();
				}
				return animation
			},
			initFrameItem(index) {
				switch (this.state){
					case 0:
					case 1:
						var top = this.getRandomValue(60, 15) + "%";
						var left = this.getRandomValue(60, 15) + "%";
						var rotate = this.getRandomValue(360, 0);
						var animation = this.initAnimation(index, top, left, rotate);
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}};
						break;
					case 2:
					case 4:
						// 全部居中
						var top = 'calc(50% - 21.25vw)';
						var left = 'calc(50% - 12.5vw)';
						var rotate = 0;
						var animation = this.initAnimation(index, top, left, rotate)
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}};
						break;
					case 3: 
						var top = 'calc(50% - 21.25vw)';
						var left = 'calc(50% - 12.5vw)';
						// 1/3在左，1/3在右
						if (index < this.count / 3) {
							left = "calc(50% - 42.5vw)" // -30
						} else if (index > this.count / 3 * 2) {
							left = "calc(50% + 18.5vw)" // +30
						}
						var rotate = 0;
						var animation = this.initAnimation(index, top, left, rotate)
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}};
						break;
					case 301:
						var top = 'calc(50% - 21.25vw)';
						var left = '';
						// 1/3在左，1/3在右，中间部分右移
						if (index < this.count / 3) {
							left = "calc(50% - 42.5vw)" // -30
						} else if (index > this.count / 3 * 2) {
							left = "calc(50% + 18.5vw)" // +30
						} else {
							left = "calc(50% + 18.5vw)"
						}
						var rotate = 0;
						var animation = this.initAnimation(index, top, left, rotate)
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}};
						break;
					case 302:
						var top = 'calc(50% - 21.25vw)';
						// 全部左移
						var left = 'calc(50% - 42.5vw)';
						var rotate = 0;
						var animation = this.initAnimation(index, top, left, rotate)
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}};
						break;
					case 5:
						// var startLeft = 5;
						// var perMargin = (100 - startLeft * 2) / 20; // 最大间隔5此时右侧牌超出屏幕
						var top = '';
						var left = '';
						if (index < 20) {
							top = "5%";
							left = 4 + index * 3.7 + "%";
						} else if (index < 40) {
							top = "15%";
							left = 4 + (index - 20) * 3.7 + "%";
						} else if (index < 59) {
							top = "25%";
							left = 7 + (index - 40) * 3.5 + "%";
						} else if (index < 78) {
							top = "35%";
							left = 7 + (index - 59) * 3.5 + "%";
						} else {
							// nothing
						}
						var rotate = 0;
						var animation = this.initAnimation(index, top, left, rotate)
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}};
						break;
					case 6:
						// nothing
						break;
					case 7:
						var preItem = this.pokerList[index];
						var fixed = preItem.fixed || false;
						var top = '';
						var left = '';
						if (index < 20) {
							top = "5%";
							left = 4 + index * 3.7 + "%";
						} else if (index < 40) {
							top = "12%";
							left = 4 + (index - 20) * 3.7 + "%";
						} else if (index < 59) {
							top = "19%";
							left = 7 + (index - 40) * 3.5 + "%";
						} else if (index < 78) {
							top = "26%";
							left = 7 + (index - 59) * 3.5 + "%";
						}
						var zIndex = 2024;
						if (fixed) {
							top = preItem.top;
							left = preItem.left;
							zIndex = preItem.zIndex;
						}
						if (index === this.selectedIndex) {
							var frameIdx = this.selectedList.length;
							var key = this.formItem.count;
							// 这里失误了客户需求变动，用数量做key不满足现有逻辑了，特殊处理一下
							if (this.formItem.title.includes("圣三角")) {
								key = 301;
							}
							var frameData = this.fixedFrameData[key];
							// console.log(frameIdx, frameData);
							if (frameData) {
								top = frameData[frameIdx].top;
								left = frameData[frameIdx].left;
								fixed = true;
								zIndex = 2024 + frameIdx + 1;
								this.selectedList.push(index);
							} else {
								console.log("暂无布局数据");
							}
						}
						var rotate = 0;
						var animation = this.initAnimation(index, top, left, rotate)
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}, fixed: fixed, zIndex: zIndex};
						break;
					case 8:
						var preItem = this.pokerList[index];
						var fixed = preItem.fixed || false;
						var top = 'calc(30% - 21.25vw)';
						var left = 'calc(50% - 12.5vw)';
						var zIndex = 2024;
						if (fixed) {
							top = preItem.top;
							left = preItem.left;
							zIndex = preItem.zIndex;
						}
						var rotate = 0;
						var animation = this.initAnimation(index, top, left, rotate)
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}, fixed: fixed, zIndex: zIndex};
						break;
					case 9:
					case 901:
						var preItem = this.pokerList[index];
						var fixed = preItem.fixed || false;
						var top = 'calc(30% - 21.25vw)';
						var left = 'calc(50% - 12.5vw)';
						var zIndex = 2024;
						var opacity = 0;
						if (fixed) {
							if (this.state === 9) {
								top = preItem.top;
							}
							left = preItem.left;
							zIndex = preItem.zIndex;
							opacity = 1;
						}
						var rotate = 0;
						var animation = this.initAnimation(index, top, left, rotate, opacity)
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}, fixed: fixed, zIndex: zIndex, opacity: opacity};
						break;
					case 10:
						var preItem = this.pokerList[index];
						var fixed = preItem.fixed || false;
						var top = 'calc(30% - 21.25vw)';
						var left = 'calc(50% - 12.5vw)';
						var zIndex = 2024;
						var opacity = 0;
						var rotate = 0;
						var trueData = null;
						if (fixed) {
							top = preItem.top;
							left = preItem.left;
							zIndex = preItem.zIndex;
							opacity = 1;
							// 取出当前卡牌在已选中列表中的下标
							var trueDataIdx = this.selectedList.indexOf(index);
							trueData = this.resultList[trueDataIdx];
							console.log(9999, trueData.isReverse);
							trueData.trueIdx = trueDataIdx;
							if (trueData.isReverse) {
								rotate = 180;
							}
							// 设置结束状态的frame
							var key = this.formItem.count;
							// 这里失误了客户需求变动，用数量做key不满足现有逻辑了，特殊处理一下
							if (this.formItem.title.includes("圣三角")) {
								key = 301;
							}
							var frameData = this.endFrameData[key];
							if (frameData) {
								top = frameData[trueDataIdx].top;
								left = frameData[trueDataIdx].left;
							}
						}
						var animation = this.initAnimation(index, top, left, rotate, opacity, 360)
						return {top: top, left: left, rotate: rotate, animation: animation, animationData: {}, fixed: fixed, zIndex: zIndex, opacity: opacity, rotateY: 360, trueData: trueData};
						break;
					default:
						break;
				}
			},
			loadAnimation(times = 1) {
				// var logInfo = {
				// 	1: "洗牌次数",
				// 	2: "洗牌完成",
				// 	3: "切牌中",
				// 	4: "切牌完成"
				// }
				// this.state = nextState;
				
				// mark: todo - 重复逻辑抽取
				switch (this.state){
					case 1:
						if (times > 3) {
							this.state = 2;
							this.loadAnimation();
							break;
						}
						console.log("洗牌次数：", times);
						this.exportAnimation();
						setTimeout(() => {
							this.loadAnimation(times+1);		
						}, this.duration);
						break;
					case 2:
						console.log("洗牌完成");
						this.exportAnimation();
					
						this.state = 3;
						setTimeout(() => {
							this.loadAnimation();		
						}, this.duration);
						break;
					case 3:
						console.log("切牌次数：1");
						this.exportAnimation();
						
						this.state = 301;
						setTimeout(() => {
							this.loadAnimation();		
						}, this.duration);
						break;
					case 301:
						console.log("切牌次数：2");
						this.exportAnimation();
						
						this.state = 302;
						setTimeout(() => {
							this.loadAnimation();		
						}, this.duration);
						break;
					case 302:
						console.log("切牌次数：3");
						this.exportAnimation();
						
						this.state = 4;
						setTimeout(() => {
							this.loadAnimation();		
						}, this.duration);
						break;
					case 4:
						console.log("切牌完成");
						this.exportAnimation();
						
						this.state = 5;
						setTimeout(() => {
							this.loadAnimation();		
						}, this.duration);
						break;
					case 5:
						console.log("摆牌中");
						this.exportAnimation();
						
						this.state = 6;
						setTimeout(() => {
							this.loadAnimation();		
						}, this.duration);
						break;
					case 6: 
						console.log("摆牌完成，可选牌数量：", this.formItem.count);
						break;
					case 7:
						console.log("选牌中：", this.selectedIndex);
						this.exportAnimation();

						if (this.selectedList.length >= this.formItem.count) {
							console.log("达到牌阵数量");
							this.state = 8;
							setTimeout(() => {
								this.loadAnimation();		
							}, this.duration);
							return;
						}
						break;
					case 8:
						console.log("选牌完成，收牌阶段");
						this.exportAnimation();
						
						this.state = 9;
						setTimeout(() => {
							this.loadAnimation();		
						}, this.duration);
						break;
					case 9:
						console.log("看牌中：1 隐藏其他牌");
						this.exportAnimation();
						
						this.state = 901;
						setTimeout(() => {
							this.loadAnimation();		
						}, this.duration);
						break;
					case 901:
						console.log("看牌中：2 上移选中牌");
						this.exportAnimation();
						
						this.state = 10;
						setTimeout(() => {
							this.loadAnimation();		
						}, this.duration);
						break;
					case 10: 
						console.log("看牌完成");
						this.exportAnimation();
						break;
					default:
						break;
				}
			},
			exportAnimation() {
				var nextFrameList = this.getFrameList();
				this.pokerList = nextFrameList.map(item => {
					return {
						...item,
						animationData: item.animation.export()
					};
				});
			},
			clickAction() {
				var idList = this.resultList.map(item => item.picIdx);
				// 逆位的数据下标数组
				var reverseList = this.resultList.filter(item => item.isReverse === true).map(item => item.picIdx);
				var tmp = {idList: idList, formItem: this.formItem, reverseList: reverseList};
				const params = encodeURIComponent(JSON.stringify(tmp));
				uni.navigateTo({url: '/pageDetail/detail/result/index?params=' + params});
			},
			pokerClickAction(index, item) {
				// console.log(item.trueData);
				if (item.trueData) {
					this.showIdx = item.trueData.trueIdx;
					console.log(`第${item.trueData.trueIdx + 1}张牌`);
					return;
				}
				if (this.isDev) {
					console.log("test");
					this.selectedIndex = index;
					this.state = 7;
					this.loadAnimation();
					return;
				}
				
				if (this.state !== 6 && this.state !== 7) {	
					console.log("暂未完成洗牌，或其他状态");
					return;
				}
				if (this.selectedList.includes(index)) {
					console.log("该牌已被选中");
					return;
				}
				if (this.selectedList.length >= this.formItem.count) {
					console.log("达到牌阵数量");
					return;
				}
				this.selectedIndex = index;
				this.state = 7;
				this.loadAnimation();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #20254c;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.part {
		width: 100%;
		flex: 1;
		color: #fff;
	}

	.top-part {
		position: relative;
		flex: 3.5 !important;
		overflow: hidden;
	}

	.bottom-part {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		.desc-list {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 100%;
			.desc-side {
				width: 160rpx;
				color: #9e9fad;
				text-align: center;
				font-size: 40rpx;
			}
			
			.desc-center {
				height: 100%;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #ccbd82;
				text-align: center;
				white-space: pre-line;
			}
		}
		
		.btn-bg-animation {
			-webkit-animation: rotateAnimation 5s linear infinite;
					animation: rotateAnimation 5s linear infinite;
		}
		@keyframes rotateAnimation {
		  0% {
		    transform: rotate(0deg);
		  }
		  100% {
		    transform: rotate(360deg);
		  }
		} 
		.start-btn-bg {
			width: 240rpx;
			height: 240rpx;
		}
		.start-btn {
			position: absolute;
			width: 150rpx;
			height: 150rpx;
			border-radius: 75rpx;
			background-color: #e5d367;
			color: #000;
			text-align: center;
			line-height: 150rpx;
			font-size: 40rpx;
			font-weight: lighter;
		}
	}
	
	.poker {
	    display: flex;
	    align-items: flex-end;
	    justify-content: center;	
		width: 25vw;
		height: 42.5vw;
		background-image: url('@/static/images/poker-back.jpeg');
		background-size: 100% 100%;
		color: #fff;
		border: 1px solid gold;
		border-radius: 10rpx;
	}
	.poker-absolute {
		position: absolute;
	}
	.poker-all-screen {
		width: 50vw;
		height: 85vw;
	}
	.poker-info {
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 25vw;
		color: #ccbd82;
		z-index: 3000;
	}
	.cover-view {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.85);
		z-index: 3000;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #ccbd82;
		margin: 20rpx;
	}
</style>